<template>
  <div class="w-full bg-[#F2F4F5] text-[20px]">
    <div class="w-full flex px-[20px]" style="margin: 0 auto">
      <!-- 左侧 -->
      <div class="mt-[-8px]">
        <div v-for="(item, index) in tab">
          <div
            @click="clickTab(index)"
            class="w-full flex justify-between items-center cursor-pointer h-[60px] px-[17px] pt-[17px] pb-[17px] bg-white"
            :style="
              parentIndex == 3 && index == 3 ? 'background-color:#EF6800;color:white' : ''
            "
          >
            <div class="flex items-center">
              <el-image
                v-if="parentIndex == 3 && index == 3"
                :src="getAssetsFile('home/setpsd2.png')"
                class="w-[24px] h-[24px]"
              ></el-image>
              <el-image v-else :src="item.image" class="w-[24px] h-[24px]"></el-image>
              <div class="ml-[10px] w-[100px]">{{ item.name }}</div>
            </div>
            <div v-if="index != 3">
              <el-image
                v-if="item.childrenShow"
                :src="getAssetsFile('home/arrow_top.png')"
                class="w-[10px] h-[10px]"
              ></el-image>
              <el-image
                v-else
                :src="getAssetsFile('home/arrow_bottom.png')"
                class="w-[10px] h-[10px]"
              ></el-image>
            </div>
          </div>
          <div v-if="item.childrenShow && item.children.length > 0">
            <div
              v-for="(items, i) in item.children"
              class="pl-[35px] w-full h-[50px] flex items-center cursor-pointer"
              :class="{
                'bg-[#EF6800] text-white': items.isActive,
                'bg-white': !items.isActive,
              }"
              @click="clickTabChildren(i, index)"
            >
              <div class="">
                {{ items.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ml-[15px] mt-[15px]" style="width: calc(100% - 178px)">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, defineEmits } from "vue";
import getAssetsFile from "@/utils/getImageurl.ts";
import { useRouter, useRoute } from "vue-router";
import order from "./order.vue";
const router = useRouter();
const route = useRoute();

const tab = ref([
  {
    name: "订单管理",
    childrenShow: false,
    image: getAssetsFile("home/order.png"),

    children: [
      {
        name: "订单支付",
        isActive: false,
      },
      {
        name: "订单查询",
        isActive: false,
      },
      {
        name: "订单修改",
        isActive: false,
      },
      {
        name: "订单续保",
        isActive: false,
      },
      {
        name: "已作废",
        isActive: false,
      },
    ],
  },
  {
    name: "批单管理",
    image: getAssetsFile("home/porder.png"),
    childrenShow: false,
    children: [
      {
        name: "批单录入",
        isActive: false,
      },
      {
        name: "批单查询",
        isActive: false,
      },
    ],
  },
  {
    name: "我的业绩",
    image: getAssetsFile("home/achievement.png"),
    childrenShow: false,
    children: [
      {
        name: "我的业绩",
        isActive: false,
      },
    ],
  },
  {
    name: "修改密码",
    childrenShow: false,
    image: getAssetsFile("home/setpsd.png"),
    children: [],
  },
]);

const type = ref(1);
const parentIndex = ref(0);

const getData = () => {
  clickTab(route.query.parentIndex);
  clickTabChildren(route.query.type, route.query.parentIndex);
};
onMounted(() => {
  getData();
});

const clickTab = (index: number) => {
  tab.value[index].childrenShow = !tab.value[index]?.childrenShow;
  parentIndex.value = index;
  if (index == 3) {
    tab.value.forEach((item) => {
      item.children.forEach((items) => {
        items.isActive = false;
      });
    });
    router.push("/index/person/setpsd?parentIndex=" + index);
  }
};

const clickTabChildren = (index: number, i: number) => {
  //i是父级下标

  if (i == 3) {
    return;
  }

  if (i != 3) {
    tab.value.forEach((item, l) => {
      if (l == i) {
        item.children.forEach((items, k) => {
          if (index == k) {
            items.isActive = true;
          } else {
            items.isActive = false;
          }
        });
      } else {
        item.children.forEach((items) => {
          items.isActive = false;
        });
      }
    });
  }

  parentIndex.value = i;
  type.value = index;
  if (parentIndex.value == 0) {
    router.push(
      `/index/person/orderPay?type=${type.value}&parentIndex=${parentIndex.value}`
    );
    return;
  }
  if (parentIndex.value == 1) {
    if (type.value == 0) {
      router.push(
        `/index/person/orderPay?type=${type.value}&parentIndex=${parentIndex.value}`
      );
    }
    if (type.value == 1) {
      router.push(
        `/index/person/orderPay?type=${type.value}&parentIndex=${parentIndex.value}&mark=1`
      );
    }

    return;
  }
  if (parentIndex.value == 2) {
    router.push(
      `/index/person/achievement?type=${type.value}&parentIndex=${parentIndex.value}`
    );
    return;
  }
};
</script>
